<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
        <view class="goods-list">
            <view class="goods-item" v-for="(item,index) in data.goods_list" :key="item.id">
                <view class="flex-row score-row">
                    <view class="flex-grow-0 ">
                        <image class="goods-pic" :src="item.goods_pic"></image>
                    </view>
                    <view class="flex-grow-1 flex-row">
                        <view @tap="setScore" :class="['flex-grow-1 score-item flex-y-center flex-x-center', item.score==3?'active':'']" :data-index="index" data-score="3">
                            <image :src="'/static/images/icon-comment-score-3'+item.score==3?'.active':''+'.png'"></image>
                            <text>好评</text>
                        </view>
                        <view @tap="setScore" :class="['flex-grow-1 score-item flex-y-center flex-x-center', item.score==2?'active':'']" :data-index="index" data-score="2">
                            <image :src="'/static/images/icon-comment-score-3'+item.score==2?'.active':''+'.png'"></image>
                            <text>中评</text>
                        </view>
                        <view @tap="setScore" :class="['flex-grow-1 score-item flex-y-center flex-x-center', item.score==1?'active':'']" :data-index="index" data-score="1">
                            <image :src="'/static/images/icon-comment-score-3'+item.score==1?'.active':''+'.png'"></image>
                            <text>差评</text>
                        </view>
                    </view>
                </view>
                <view class="flex-row content-row">
                    <view class="flex-grow-0 nowrap form-label">评价内容</view>
                    <view class="flex-grow-1">
                        <textarea @input="contentInput" :data-index="index" maxlength="2000" placeholder="请输入评价内容" placeholderStyle="color:#ccc"></textarea>
                    </view>
                </view>
                <view class="pic-list">
                    <view class="image-preview" v-for="(pic,pic_index) in item.pic_list" :key="pic.id">
                        <text @tap="deleteImage" class="flex-x-center flex-y-center image-del" :data-index="index" :data-pic-index="pic_index">×
                </text>
                        <image mode="aspectFill" :src="pic" style="width: 160upx;height: 160upx"></image>
                    </view>
                    <view @tap="chooseImage" class="image-picker" :data-index="index" v-if="!item.pic_list||item.pic_list.length<6">
                        <image :src="data.__wxapp_img.dapp.image_picker.url" style="width: 160upx;height: 160upx"></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="bar-bottom">
            <view @tap="commentSubmit" class="submit-btn flex-x-center flex-y-center">提交</view>
        </view>
    </view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        goods_list: []
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var e = this;
        e.setData({
            order_id: t.id
        }), myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.miaosha.comment_preview,
            data: {
                order_id: t.id
            },
            success: function(t) {
                if (e.getApp.core.hideLoading(), 1 == t.code && e.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    showCancel: !1,
                    success: function(t) {
                        t.confirm && e.getApp.core.navigateBack();
                    }
                }), 0 == t.code) {
                    for (var o in t.data.goods_list) t.data.goods_list[o].score = 3, t.data.goods_list[o].content = "", 
                    t.data.goods_list[o].pic_list = [], t.data.goods_list[o].uploaded_pic_list = [];
                    e.setData({
                        goods_list: t.data.goods_list
                    });
                }
            }
        });
    },
		onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this);
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(t) {
        myVue.getApp.page.onReachBottom(this);
    },
		methods: {
			setScore: function(t) {
        var e = this, o = t.currentTarget.dataset.index, a = t.currentTarget.dataset.score, i = e.data.goods_list;
        i[o].score = a, e.setData({
            goods_list: i
        });
    },
    contentInput: function(t) {
        var e = this, o = t.currentTarget.dataset.index;
        e.data.goods_list[o].content = t.detail.value, e.setData({
            goods_list: e.data.goods_list
        });
    },
    chooseImage: function(t) {
        var e = this, o = t.currentTarget.dataset.index, a = e.data.goods_list, i = a[o].pic_list.length;
        myVue.getApp.core.chooseImage({
            count: 6 - i,
            success: function(t) {
                a[o].pic_list = a[o].pic_list.concat(t.tempFilePaths), e.setData({
                    goods_list: a
                });
            }
        });
    },
    deleteImage: function(t) {
        var e = this, o = t.currentTarget.dataset.index, a = t.currentTarget.dataset.picIndex, i = e.data.goods_list;
        i[o].pic_list.splice(a, 1), e.setData({
            goods_list: i
        });
    },
    commentSubmit: function(t) {
			var _this = this;
        function e(t) {
            if (t == i.length) return o();
            var a = 0;
            if (!i[t].pic_list.length || 0 == i[t].pic_list.length) return e(t + 1);
            for (var s in i[t].pic_list) !function(o) {
                myVue.getApp.core.uploadFile({
                    url: myVue.getApp.api.default.upload_image,
                    name: "image",
                    filePath: i[t].pic_list[o],
                    complete: function(s) {
                        if (s.data) {
                            var n = JSON.parse(s.data);
                            0 == n.code && (i[t].uploaded_pic_list[o] = n.data.url);
                        }
                        if (++a == i[t].pic_list.length) return e(t + 1);
                    }
                });
            }(s);
        }
        function o() {
            myVue.getApp.request({
                url: myVue.getApp.api.miaosha.comment,
                method: "post",
                data: {
                    order_id: a.data.order_id,
                    goods_list: JSON.stringify(i)
                },
                success: function(t) {
                    myVue.getApp.core.hideLoading(), 0 == t.code && myVue.getApp.core.showModal({
                        title: "提示",
                        content: t.msg,
                        showCancel: !1,
                        success: function(t) {
                            t.confirm && myVue.getApp.core.redirectTo({
                                url: "/pages/miaosha/order/order?status=2"
                            });
                        }
                    }), 1 == t.code && myVue.getApp.core.showToast({
                        title: t.msg,
                        image: "/static/images/icon-warning.png"
                    });
                }
            });
        }
        var a = this;
        myVue.getApp.core.showLoading({
            title: "正在提交",
            mask: !0
        });
        var i = a.data.goods_list;
        e(0);
    },
		},
	}
</script>

<style scoped>
.bar-bottom {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    width: 100%;
}

.submit-btn {
    background: #ff4544;
    color: #fff;
    height: 100upx;
}

.goods-list {
    border-top: 1upx solid #e3e3e3;
    padding-bottom: 100upx;
}

.goods-item {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
    margin-bottom: 20upx;
}

.goods-item .score-row {
    padding: 24upx 20upx;
    border-bottom: 1upx #eee solid;
}

.goods-item .score-row .goods-pic {
    width: 72upx;
    height: 72upx;
}

.goods-item .score-row .score-item image {
    width: 40upx;
    height: 40upx;
    margin-right: 20upx;
}

.goods-item .score-row .score-item.active {
    color: #ff4544;
}

.goods-item .content-row {
    padding: 24upx 20upx;
}

.goods-item .form-label {
    margin-right: 24upx;
}

.goods-item textarea {
    width: 100%;
    height: 200upx;
    padding: 0 0;
}

.goods-item .pic-list {
    padding: 24upx 20upx;
    margin-left: -20upx;
    margin-top: -20upx;
}

.image-picker {
    font-size: 0;
}

.image-picker,.image-preview {
    display: inline-block;
    margin-left: 20upx;
    margin-top: 20upx;
}

.image-preview {
    position: relative;
}

.image-preview .image-del {
    position: absolute;
    top: -15upx;
    right: -15upx;
    height: 50upx;
    width: 50upx;
    background: #ff4544;
    color: #fff;
    font-weight: bolder;
    border-radius: 999upx;
    font-size: 9pt;
    box-shadow: 0 1upx 2upx rgba(0,0,0,.2);
    z-index: 999;
}
</style>
